<template>
    <div class="conter-item">
        <div class="item-left">
            <div class="lefttop">
                资产驾驶舱
            </div>
            <div class="leftbot">
                <div class="botone">
                    <div class="botone-one">
                        <div class="itemone-left iconfont icon-zichanguanli-zichantaizhang"></div>
                        <div class="itemone-right">
                            <div class="itemone-r-top">资产总数</div>
                            <div class="itemone-r-bot">{{ mathobj.propertyNum }}<span>个</span> </div>
                        </div>
                    </div>
                    <div class="botone-two">
                        <div class="itemone-left iconfont icon-assets"></div>
                        <div class="itemone-right">
                            <div class="itemone-r-top">资产总值</div>
                            <div class="itemone-r-bot">{{ mathobj.propertyValue }}<span>元</span> </div>
                        </div>
                    </div>
                    <div class="botone-three">
                        <div class="itemone-left iconfont icon-imagevector"></div>
                        <div class="itemone-right">
                            <div class="itemone-r-top">耗材总数</div>
                            <div class="itemone-r-bot">{{ mathobj.conSumNum }}<span>个</span> </div>
                        </div>
                    </div>
                    <div class="botone-four">
                        <div class="itemone-left iconfont icon-zichangailan"></div>
                        <div class="itemone-right">
                            <div class="itemone-r-top">耗材总值</div>
                            <div class="itemone-r-bot">{{ mathobj.conSumValue }}<span>元</span> </div>
                        </div>
                    </div>
                </div>
                <div class="bottwo">
                    <div class="bottwo-left" ref="bottwoleft"></div>
                    <div class="bottwo-right" ref="bottworight"></div>
                </div>
                <div class="botthree">
                    <div class="botthree-left" ref="botthreeleft"></div>
                    <div class="botthree-right" ref="botthreeright"></div>
                </div>
            </div>
        </div>
        <div class="item-right">
            <div class="righttop"><span class="iconfont icon-guzhang1"></span> <span class="wechomename">欢迎回来,{{ name
                    }}</span>
            </div>
            <div class="rightbot">
                <div class="rightone">
                    <div class="rightone_top">快捷入口</div>
                    <div class="rightone_bot">
                        <div class="botitem" v-for="(item, index) in shortcutlist" :key="index"
                            @click="torouter(item.path)">
                            <div class="iconfont" :class="item.icon"></div>
                            <div class="botitem_title">{{ item.title }}</div>
                        </div>
                    </div>
                </div>
                <div class="righttwo">
                    <div class="righttwo_top">
                        <div class="righttwo_top_left">资产列表</div>
                        <div class="righttwo_top_right" @click="golistpage">查看更多>></div>
                    </div>
                    <div class="tableheader">
                        <!-- <div class="one">序号</div> -->
                        <div class="two">资产名称</div>
                        <div class="three">业务状态</div>
                        <div class="four">资产数量</div>
                    </div>
                    <div class="righttwo_bot">
                        <vue-seamless-scroll :data="listData" class="wrap-chart-tbody">
                            <ul class="item">
                                <li v-for="(item, index) in listData" :key="index">
                                    <!-- <div class="one">{{ index + 1 }}</div> -->
                                    <div class="two">{{ item.equipName }}</div>
                                    <div class="three">
                                        <span v-if="item.equipState == 1"
                                            style="background-color: rgba(0, 102, 255, 0.2); color:rgb(0, 102, 255) ;  display: inline-block; padding: 3px 10px;">闲置中</span>
                                        <span v-else-if="item.equipState == 2"
                                            style="background-color: rgba(212, 174, 5, 0.2); color:rgb(212, 174, 5) ;   display: inline-block; padding: 3px 10px;">报修中</span>
                                        <span v-else-if="item.equipState == 3"
                                            style="background-color: rgba(212, 71, 5, 0.1); color: rgb(212, 71, 5);  display: inline-block; padding: 3px 10px;">已报废</span>
                                        <span v-else-if="item.equipState == 4"
                                            style="background-color: rgba(5, 212, 57, 0.1);  color: rgb(5, 212, 57); display: inline-block; padding: 3px 10px;">使用中</span>
                                    </div>
                                    <div class="four">1</div>
                                </li>
                            </ul>
                        </vue-seamless-scroll>
                    </div>
                </div>
                <!-- <div class="rightthree">
                    <div class="rightthree_top">
                        <div class="rightthree_top_left">排行总览</div>
                        <div class="rightthree_top_right">查看更多>></div>
                    </div>
                    <div class="rightthree_bot">

                    </div>
                </div> -->
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import bus from '../common/bus.js';
import { getBaseInfo, getConSumPie, propertylistByPage, getConSumBar, getCategoryBar, getStatePie } from '../../api/index'
import vueSeamlessScroll from 'vue-seamless-scroll'; //无缝滚动 局部引用
export default {
    name: "home-page",
    props: {},
    components: { vueSeamlessScroll },
    data() {
        return {
            mathobj: {},
            listData: [],
            name: sessionStorage.getItem('username'),
            collapse: false,
            chart: null,
            chart1: null,
            clart2: null,
            chart3: null,
            shortcutlist: [
                { icon: 'icon-lingyongshenqingdan', title: '资产入库', path: 'assetin' },
                { icon: 'icon-chulibeituihuixinxi', title: '资产报修', path: 'assetrepair' },
                { icon: 'icon-caigouzichan', title: '资产报废', path: 'assetwaste' },
                { icon: 'icon-xinzengpandiandan1', title: '耗材列表', path: 'consumablelist' },
                { icon: 'icon-zichanzhuanyi1', title: '耗材出库', path: 'consumableout' },
                { icon: 'icon-weibaoshenqingjilu', title: '耗材入库', path: 'consumablein' },]
        }
    },
    computed: {},
    watch: {
        collapse(newValue, oldValue) {
            if (newValue !== oldValue) {
                this.handleResize()
            }
        }

    },
    created() {


        // 通过 Event Bus 进行组件间通信，来折叠侧边栏
        bus.$on('collapse', (msg) => {
            this.collapse = msg;
            bus.$emit('collapse-content', msg);
        });

    },
    mounted() {
        // 空心饼形图
        this.chart = echarts.init(this.$refs.bottwoleft);
        // 实心饼形图
        this.chart1 = echarts.init(this.$refs.botthreeright);
        this.chart2 = echarts.init(this.$refs.bottworight);
        this.chart3 = echarts.init(this.$refs.botthreeleft);
        // 监听窗口大小变化，调用 resize() 方法重新渲染
        window.addEventListener('resize', this.handleResize);
        this.render()
        this.consumables()
        this.solid()
        this.inventory()//耗材总览
        this.getBaseInfos()
        this.pagelist()

    },
    methods: {
        golistpage() {
            this.$router.push('/assetlist');
        },
        async pagelist() {
            const obj = {
                pageNum: 1,
                pageSize: 20,
            }
            const data = await propertylistByPage(obj)
            this.listData = data.data.data.records
            // console.log(this.listData);

        },
        async render() {
            const data = await getStatePie()
            this.renderChart(data.data.data)
        },
        async solid() {
            const data = await getConSumPie()
            this.solidChart(data.data.data)
        },
        async inventory() {
            const data = await getConSumBar()
            const arr = data.data.data ? data.data.data : { xdata: [''], outData: ['0'], inData: ['0'] }
            this.inventoryChart(arr)//耗材总览
        },
        async getBaseInfos() {
            const data = await getBaseInfo()
            this.mathobj = data.data.data
        },
        async consumables() {
            const data = await getCategoryBar()
            const arr = data.data.data ? data.data.data : { xdata: [''], ydata: ['0'] }
            this.consumablesChart(arr)//资产分类


        },
        torouter(e) {
            this.$router.push(e);
        },
        handleResize() {
            setTimeout(() => {
                // 调用 resize() 方法进行图表的自适应
                // 获取父容器的宽度和高度
                this.chart.resize();
                this.chart1.resize();
                this.chart2.resize();
                this.chart3.resize();
            }, 500);
        },
        //饼形图
        renderChart(e) {
            const chartOptions = {
                title: {
                    text: '资产状态',
                    left: '10',
                    top: '10',
                    textStyle: {
                        fontSize: 18,
                        color: '#000'
                    },

                },
                color: ['#ee752f', '#5087ec', '#68bbc4', '#58a55c', '#f2bd42', '#fec51d', '#f33826'],
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'verticla',
                    top: '5%',
                    left: '72%',
                    data: ['移动端', '官网']
                },
                series: [
                    {
                        itemStyle: {
                            // borderRadius: 10,
                        },
                        type: 'pie',
                        radius: ['55%', '80%'],
                        center: ['51%', '50%'],
                        // avoidLabelOverlap: false,
                        label: {
                            show: true,
                            fontSize: 12,
                            formatter: '{b}\n{d}%'
                            // position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 13,
                                fontWeight: 'bold'
                            }
                        },

                        labelLine: {
                            show: true//控制图例到图的连接线
                        },
                        data: e



                    }
                ]
            };
            const chartContainer = document.querySelector('.bottwo-left');
            const chartInstance = echarts.init(chartContainer);
            chartInstance.setOption(chartOptions);
        },
        //实心饼形图
        solidChart(e) {
            const chartOptions = {
                title: {
                    text: '耗材仓库',
                    left: '10',
                    top: '10',
                    textStyle: {
                        fontSize: 18,
                        color: '#000'
                    },

                },
                color: ['#ee752f', '#5087ec', '#68bbc4', '#58a55c', '#f2bd42',],
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'verticla',
                    top: '5%',
                    left: '72%',
                    data: ['移动端', '官网']
                },
                series: [
                    {
                        itemStyle: {
                            // borderRadius: 10,
                        },
                        type: 'pie',
                        // radius: ['55%', '80%'],
                        center: ['51%', '52%'],
                        // avoidLabelOverlap: false,
                        label: {
                            show: true,
                            fontSize: 12,
                            formatter: '{b}\n{d}%'
                            // position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 13,
                                fontWeight: 'bold'
                            }
                        },

                        labelLine: {
                            show: true//控制图例到图的连接线
                        },
                        data: e

                    }
                ]
            };
            const chartContainer = document.querySelector('.botthree-right');
            const chartInstance = echarts.init(chartContainer);
            chartInstance.setOption(chartOptions);
        },
        //耗材总览
        inventoryChart(e) {
            const columnOption = {
                color: ['#5ab1ef', '#b6a2de',],
                title: {
                    text: '耗材总览',
                    left: '10',
                    top: '10',
                    textStyle: {
                        fontSize: 18,
                        color: '#000'
                    },

                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: { right: 50, top: 15 },
                grid: {
                    top: '18%',
                    left: '3%',
                    right: '4%',
                    bottom: '7%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: e.xdata
                },
                yAxis: {
                    splitNumber: 5,
                    min: 0,
                    type: 'value',
                    boundaryGap: [0, 1]
                },
                series: [
                    {
                        name: '耗材入库',
                        itemStyle: {
                            borderRadius: 10,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: '#c0ddaf'
                                },
                                {
                                    offset: 0.5,
                                    color: '#8adb5c'

                                },
                                {
                                    offset: 1,
                                    color: '#09d309'
                                }
                            ])
                        },
                        barWidth: 20, // 设置柱形的宽度为 20 像素
                        type: 'bar',
                        data: e.inData
                    },
                    {
                        name: '耗材出库',
                        itemStyle: {
                            borderRadius: 10,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: '#00feff'
                                },
                                {
                                    offset: 0.5,
                                    color: '#027eff'
                                },
                                {
                                    offset: 1,
                                    color: '#0286ff'
                                }
                            ])
                        },
                        barWidth: 20, // 设置柱形的宽度为 20 像素
                        type: 'bar',
                        data: e.outData
                    }
                ]
            };
            const chartcolumnContainer = document.querySelector('.botthree-left');
            const chartcolumnInstance = echarts.init(chartcolumnContainer);
            chartcolumnInstance.setOption(columnOption);
        },
        //资产分类
        consumablesChart(e) {
            const columnOption = {
                color: ['#5ab1ef', '#b6a2de',],
                title: {
                    text: '资产分类',
                    left: '10',
                    top: '10',
                    textStyle: {
                        fontSize: 18,
                        color: '#000'
                    },

                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: { top: '15' },
                grid: {
                    top: '18%',
                    left: '3%',
                    right: '4%',
                    bottom: '7%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: e.xdata
                },
                yAxis: {
                    splitNumber: 5,
                    min: 0,
                    type: 'value',
                    boundaryGap: [0, 1]
                },
                series: [

                    {
                        itemStyle: {
                            borderRadius: 10,
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0, color: '#fec51d' // 0% 处的颜色 
                            }, {
                                offset: 1, color: '#f33826' // 100% 处的颜色
                            }],)
                        },
                        barWidth: 35, // 设置柱形的宽度为 20 像素
                        type: 'bar',
                        data: e.ydata
                    }
                ]
            };
            const chartcolumnContainer = document.querySelector('.bottwo-right');
            const chartcolumnInstance = echarts.init(chartcolumnContainer);
            chartcolumnInstance.setOption(columnOption);
        }
    },
    beforeDestroy() {
        // 移除窗口大小变化的监听
        window.removeEventListener('resize', this.handleResize);
        // 销毁图表
        this.chart.dispose();
        this.chart1.dispose();
        this.chart2.dispose();
        this.chart3.dispose();

    },
}
</script>

<style lang="less" scoped>
.conter-item {
    width: calc(100%);
    height: calc(100%);
    // background-color: aquamarine;
    // padding: 10px;
    display: flex;

    .item-left {
        // background-color: aqua;
        width: calc(80% - 10px);
        height: 100%;
        margin-right: 10px;

        .lefttop {
            box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            height: 6%;
            background-color: #fff;
            // background-color: #8adb5c;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: bold;


        }

        .leftbot {
            height: calc(94% - 10px);
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .botone {
                height: calc(12% - 30px);
                background-color: #fff;
                display: flex;
                padding: 5px 0;
                border-radius: 8px;
                box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);

                .botone-one,
                .botone-two,
                .botone-three,
                .botone-four {
                    border-right: 1px solid #cecaca;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 25%;

                    // height: calc(100% - 20px);
                    .itemone-left {
                        margin-right: 10px;
                    }

                    .icon-assets {
                        color: rgb(19, 207, 207);
                        font-size: 30px;
                        border-radius: 50%;
                        padding: 10px;
                        background-color: rgba(176, 215, 218, 0.514);
                    }

                    .icon-zichangailan {
                        color: rgb(104, 207, 19);
                        font-size: 32px;
                        border-radius: 50%;
                        padding: 10px;
                        background-color: rgba(186, 218, 176, 0.384);
                    }

                    .icon-imagevector {
                        color: rgb(230, 129, 13);
                        font-size: 30px;
                        border-radius: 50%;
                        padding: 10px;
                        background-color: rgba(218, 196, 176, 0.384);
                    }

                    .icon-zichanguanli-zichantaizhang {
                        color: rgb(223, 14, 160);
                        font-size: 30px;
                        border-radius: 50%;
                        padding: 10px;
                        background-color: rgba(218, 176, 205, 0.514);
                    }

                    .itemone-right {
                        display: flex;
                        flex-direction: column;
                        align-items: center;

                        .itemone-r-top {
                            font-size: 17px;
                            font-weight: bold;
                        }

                        .itemone-r-bot {
                            font-size: 17px;
                            font-weight: bold;

                            span {
                                font-size: 14px;
                                font-weight: 400;
                                margin-left: 10px;
                            }
                        }
                    }


                }

                .botone-four {
                    border-right: 0;

                }
            }

            .bottwo {
                height: 44%;
                display: flex;

                .bottwo-left {
                    border-radius: 8px;
                    width: calc(50% - 5px);
                    margin-right: 10px;
                    background-color: #fff;
                    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);

                }

                .bottwo-right {
                    border-radius: 8px;
                    background-color: #fff;
                    width: calc(50% - 5px);
                    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);

                }
            }

            .botthree {
                height: 44%;
                display: flex;

                .botthree-left {
                    border-radius: 8px;
                    width: calc(50% - 5px);
                    margin-right: 10px;
                    background-color: #fff;

                }

                .botthree-right {
                    border-radius: 8px;
                    background-color: #fff;
                    width: calc(50% - 5px);

                }
            }
        }
    }

    .item-right {
        // background-color: aqua;
        width: 20%;
        height: 100%;

        .righttop {
            box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);

            border-radius: 8px;
            height: 6%;
            background-color: #fff;
            margin-bottom: 10px;
            display: flex;
            align-items: center;

            .icon-guzhang1 {
                font-size: 32px;
                color: #cabf1c;
                margin: 0px 10px;
            }

            .wechomename {
                font-size: 16px;
                font-weight: bold;
            }
        }

        .rightbot {
            height: calc(94% - 10px);
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .rightone {
                border-radius: 8px;
                height: calc(40% - 40px);
                background-color: #fff;
                padding: 10px;
                box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);

                .rightone_top {
                    display: flex;
                    align-items: center;
                    font-size: 15px;
                    height: 15%;
                    font-weight: 600;
                    color: #000000;
                    border-bottom: 1px solid #dbd9d9;
                }



                .rightone_bot {
                    padding: 10px;
                    height: calc(85% - 20px);
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-evenly;

                    .botitem {
                        width: 35%;
                        height: 20%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border: 1px solid #dbd9d9;
                        border-radius: 5px;

                        .iconfont {
                            font-size: 20px;
                            margin-right: 5px;
                            color: #727171;
                        }

                        .icon-lingyongshenqingdan {
                            color: #db6110;
                        }

                        .icon-chulibeituihuixinxi {
                            color: #6bdb10;

                        }

                        .icon-caigouzichan {
                            color: #09ccda;
                            font-size: 18px;

                        }

                        .icon-xinzengpandiandan1 {
                            color: #2788c9;
                            font-size: 17px;

                        }

                        .icon-zichanzhuanyi1 {
                            color: #db109e;
                            font-size: 19px;
                        }

                        .icon-weibaoshenqingjilu {
                            color: #4adb10;

                        }



                    }
                }
            }

            .righttwo {
                border-radius: 8px;
                height: calc(60% - 20px);
                background-color: #fff;
                padding: 10px;
                box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);

                .righttwo_top {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 15px;
                    height: 14%;
                    font-weight: 600;
                    color: #000000;
                    border-bottom: 1px solid #dbd9d9;

                    .righttwo_top_right {
                        font-weight: 400;
                        color: #2788c9;
                    }
                }

                .tableheader {
                    height: 40px;
                    display: flex;
                    line-height: 40px;
                    font-weight: 600;

                    .two {
                        width: 40%;
                        text-align: center;

                    }

                    .three {
                        width: 40%;
                        text-align: center;

                    }

                    .four {
                        width: 20%;
                        text-align: center;

                    }
                }

                .righttwo_bot {
                    height: calc(86% - 40px);
                    overflow: hidden;

                    .item li {
                        display: flex;
                        margin-bottom: 10px;

                        .two {
                            width: 40%;
                            text-align: center;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }

                        .three {
                            width: 40%;
                            text-align: center;

                        }

                        .four {
                            width: 20%;
                            text-align: center;

                        }
                    }
                }

            }

            .rightthree {
                border-radius: 8px;
                height: calc(20% - 20px);
                background-color: #fff;
                padding: 10px;

                .rightthree_top {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 15px;
                    height: 30%;
                    font-weight: 600;
                    color: #000000;
                    border-bottom: 1px solid #dbd9d9;

                    .rightthree_top_right {
                        font-weight: 400;
                        color: #2788c9;
                    }
                }

                .rightthree_bot {
                    height: 70%;
                    background-color: rgba(206, 23, 23, 0.288);
                }
            }
        }
    }

}
</style>